<script setup>
import { ref, onMounted } from 'vue'
import { mockFashionItems, mockCategories } from './mockData'

const activeCategory = ref('all')
const filteredItems = ref([])
const isScrolled = ref(false)
const cartCount = ref(0)
const wishlistCount = ref(0)

// 监听滚动事件，用于导航栏样式变化
const handleScroll = () => {
  isScrolled.value = window.scrollY > 50
}

// 根据选中的分类筛选商品
const filterByCategory = (category) => {
  activeCategory.value = category
  if (category === 'all') {
    filteredItems.value = mockFashionItems
  } else {
    filteredItems.value = mockFashionItems.filter(item => item.category === category)
  }
}

// 处理加入购物车
const handleAddToCart = (item) => {
  cartCount.value++
  alert(`已将「${item.name}」加入购物车！\n购物车商品数量：${cartCount.value}`)
}

// 处理加入收藏
const handleAddToFavorite = (item, event) => {
  event.stopPropagation() // 阻止事件冒泡
  wishlistCount.value++
  alert(`已将「${item.name}」加入收藏！\n收藏商品数量：${wishlistCount.value}`)
}

// 处理导航链接点击
const handleNavClick = (route) => {
  alert(`即将跳转到${route}页面`)
}

// 处理英雄区按钮点击
const handleExplore = () => {
  document.querySelector('.products')?.scrollIntoView({ behavior: 'smooth' })
}

// 处理搜索按钮点击
const handleSearch = () => {
  alert('搜索功能即将开放，敬请期待！')
}

// 处理用户按钮点击
const handleUser = () => {
  alert('用户中心即将开放，敬请期待！')
}

// 处理社交媒体点击
const handleSocialClick = (platform) => {
  alert(`关注我们的${platform}账号，获取更多时尚资讯！`)
}

// 页面加载时初始化
onMounted(() => {
  window.addEventListener('scroll', handleScroll)
  filterByCategory('all')
})
</script>

<template>
  <div class="app">
    <!-- 导航栏 -->
    <header :class="['navbar', { 'navbar-scrolled': isScrolled }]">
      <div class="container">
        <div class="logo">
          <h1>时尚穿搭</h1>
        </div>
        <nav>
          <ul class="nav-links">
            <li><a href="#" class="nav-link active" @click="handleNavClick('首页')">首页</a></li>
            <li><a href="#" class="nav-link" @click="handleNavClick('分类')">分类</a></li>
            <li><a href="#" class="nav-link" @click="handleNavClick('搭配推荐')">搭配推荐</a></li>
            <li><a href="#" class="nav-link" @click="handleNavClick('时尚资讯')">时尚资讯</a></li>
            <li><a href="#" class="nav-link" @click="handleNavClick('关于我们')">关于我们</a></li>
          </ul>
        </nav>
        <div class="user-actions">
          <button class="btn-search" @click="handleSearch">
            <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg>
          </button>
          <button class="btn-user" @click="handleUser">
            <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path></svg>
          </button>
        </div>
      </div>
    </header>

    <!-- 英雄区 -->
    <section class="hero" style="background: linear-gradient(135deg, #FF6B6B, #FFD166);">
      <div class="hero-content">
        <h2>2024春夏新品</h2>
        <p>发现属于你的时尚风格，展现独特魅力</p>
        <button class="btn-primary" @click="handleExplore">立即探索</button>
      </div>
    </section>

    <!-- 分类筛选 -->
    <section class="categories">
      <div class="container">
        <div class="category-tabs">
          <button 
            v-for="category in mockCategories" 
            :key="category.id"
            :class="['category-tab', { active: activeCategory === category.id }]"
            @click="filterByCategory(category.id)"
          >
            {{ category.name }}
          </button>
        </div>
      </div>
    </section>

    <!-- 商品列表 -->
    <section class="products">
      <div class="container">
        <h2 class="section-title">精选单品</h2>
        <div class="product-grid">
          <div 
            v-for="item in filteredItems" 
            :key="item.id"
            class="product-card"
          >
            <div 
              class="product-image" 
              :style="{ 
                backgroundColor: item.bgColor || '#f0f0f0', 
                color: item.textColor || '#333',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: '18px',
                fontWeight: 'bold',
                minHeight: '300px'
              }"
            >
              {{ item.name }}
              <button class="btn-add-to-favorite" @click="handleAddToFavorite(item, $event)">
                <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path></svg>
              </button>
            </div>
            <div class="product-info">
              <h3 class="product-name">{{ item.name }}</h3>
              <p class="product-price">¥{{ item.price }}</p>
              <button class="btn-add-to-cart" @click="handleAddToCart(item)">加入购物车</button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 搭配推荐 -->
    <section class="outfits">
      <div class="container">
        <h2 class="section-title">搭配推荐</h2>
        <div class="outfit-grid">
            <div class="outfit-card">
              <div class="outfit-image" style="background: linear-gradient(135deg, #FF6B6B, #FF8E53); display: flex; align-items: center; justify-content: center; color: white; font-size: 20px; font-weight: bold; height: 300px;">
                夏日休闲风
              </div>
              <div class="outfit-info">
                <h3>夏日休闲风</h3>
                <p>轻松打造舒适又时尚的夏日造型</p>
                <button class="btn-view-outfit" @click="handleNavClick('夏日休闲风搭配')">查看详情</button>
              </div>
            </div>
            <div class="outfit-card">
              <div class="outfit-image" style="background: linear-gradient(135deg, #4ECDC4, #45B7D1); display: flex; align-items: center; justify-content: center; color: white; font-size: 20px; font-weight: bold; height: 300px;">
                职场精英
              </div>
              <div class="outfit-info">
                <h3>职场精英</h3>
                <p>展现专业又不失个性的职场形象</p>
                <button class="btn-view-outfit" @click="handleNavClick('职场精英搭配')">查看详情</button>
              </div>
            </div>
            <div class="outfit-card">
              <div class="outfit-image" style="background: linear-gradient(135deg, #F7DC6F, #F39C12); display: flex; align-items: center; justify-content: center; color: white; font-size: 20px; font-weight: bold; height: 300px;">
                周末出行
              </div>
              <div class="outfit-info">
                <h3>周末出行</h3>
                <p>休闲舒适又充满活力的周末装扮</p>
                <button class="btn-view-outfit" @click="handleNavClick('周末出行搭配')">查看详情</button>
              </div>
            </div>
          </div>
      </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
      <div class="container">
        <div class="footer-content">
          <div class="footer-column">
            <h3>时尚穿搭</h3>
            <p>打造你的专属时尚风格</p>
          </div>
          <div class="footer-column">
            <h4>快速链接</h4>
            <ul>
              <li><a href="#" @click="handleNavClick('首页')">首页</a></li>
              <li><a href="#" @click="handleNavClick('分类')">分类</a></li>
              <li><a href="#" @click="handleNavClick('搭配推荐')">搭配推荐</a></li>
              <li><a href="#" @click="handleNavClick('时尚资讯')">时尚资讯</a></li>
            </ul>
          </div>
          <div class="footer-column">
            <h4>客户服务</h4>
            <ul>
              <li><a href="#" @click="handleNavClick('联系我们')">联系我们</a></li>
              <li><a href="#" @click="handleNavClick('常见问题')">常见问题</a></li>
              <li><a href="#" @click="handleNavClick('退换政策')">退换政策</a></li>
              <li><a href="#" @click="handleNavClick('隐私政策')">隐私政策</a></li>
            </ul>
          </div>
          <div class="footer-column">
            <h4>关注我们</h4>
            <div class="social-icons">
              <a href="#" class="social-icon" @click="handleSocialClick('微博')">
                <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M18.408 2.372h3.064l-7.09 8.302-8.084-8.302h3.187l4.93 5.738 5.237-5.738zm-1.482 17.526h-20v-11.847h20v11.847zm-10-13.161c-1.104 0-2-.896-2-2s.896-2 2-2 2 .896 2 2-.896 2-2 2z"></path></svg>
              </a>
              <a href="#" class="social-icon" @click="handleSocialClick('微信')">
                <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723 10.029 10.029 0 01-3.127 1.195 4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.21 0-.42-.015-.63A9.934 9.934 0 0024 4.59z"></path></svg>
              </a>
              <a href="#" class="social-icon" @click="handleSocialClick('Instagram')">
                <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"></path></svg>
              </a>
            </div>
          </div>
        </div>
        <div class="copyright">
          <p>&copy; 2024 时尚穿搭 版权所有</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<style>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f8f8f8;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 导航栏样式 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 0;
  transition: all 0.3s ease;
  z-index: 1000;
}

.navbar-scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 15px 0;
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo h1 {
  font-size: 24px;
  font-weight: 700;
  color: #333;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 30px;
}

.nav-link {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
  color: #ff6b6b;
}

.user-actions {
  display: flex;
  gap: 15px;
}

.btn-search,
.btn-user {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #333;
  padding: 5px;
  transition: color 0.3s ease;
}

.btn-search:hover,
.btn-user:hover {
  color: #ff6b6b;
}

/* 英雄区样式 */
.hero {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
}

.hero-content h2 {
  font-size: 48px;
  margin-bottom: 20px;
  font-weight: 700;
}

.hero-content p {
  font-size: 20px;
  margin-bottom: 30px;
}

.btn-primary {
  background-color: #ff6b6b;
  color: white;
  border: none;
  padding: 15px 30px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: #ee5253;
}

/* 分类筛选样式 */
.categories {
  padding: 40px 0;
  background-color: white;
}

.category-tabs {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.category-tab {
  background: none;
  border: 1px solid #ddd;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.category-tab:hover {
  border-color: #ff6b6b;
  color: #ff6b6b;
}

.category-tab.active {
  background-color: #ff6b6b;
  color: white;
  border-color: #ff6b6b;
}

/* 商品列表样式 */
.products {
  padding: 60px 0;
}

.section-title {
  font-size: 32px;
  margin-bottom: 40px;
  text-align: center;
  font-weight: 700;
  color: #333;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
}

.product-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.product-image {
  position: relative;
  overflow: hidden;
  height: 350px;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-card:hover .product-image img {
  transform: scale(1.05);
}

.btn-add-to-favorite {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: white;
  border: none;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  color: #ccc;
  transition: all 0.3s ease;
}

.btn-add-to-favorite:hover {
  color: #ff6b6b;
  transform: scale(1.1);
}

.product-info {
  padding: 20px;
}

.product-name {
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: 600;
}

.product-price {
  font-size: 18px;
  font-weight: 700;
  color: #ff6b6b;
  margin-bottom: 15px;
}

.btn-add-to-cart {
  width: 100%;
  padding: 12px;
  background-color: #333;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.btn-add-to-cart:hover {
  background-color: #ff6b6b;
}

/* 搭配推荐样式 */
.outfits {
  padding: 60px 0;
  background-color: #f8f8f8;
}

.outfit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
}

.outfit-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  background-color: white;
}

.outfit-card:hover {
  transform: translateY(-5px);
}

.outfit-image {
  width: 100%;
  border-radius: 8px 8px 0 0;
}

.outfit-info {
  padding: 20px;
  text-align: center;
}

.outfit-info h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #333;
}

.outfit-info p {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}

.btn-view-outfit {
  display: inline-block;
  padding: 10px 20px;
  background-color: #ff6b6b;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.btn-view-outfit:hover {
  background-color: #ee5253;
}

/* 页脚样式 */
.footer {
  background-color: #333;
  color: white;
  padding: 60px 0 30px;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
  margin-bottom: 40px;
}

.footer-column h3 {
  font-size: 20px;
  margin-bottom: 20px;
}

.footer-column h4 {
  font-size: 16px;
  margin-bottom: 15px;
  color: #ff6b6b;
}

.footer-column ul {
  list-style: none;
}

.footer-column li {
  margin-bottom: 10px;
}

.footer-column a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-column a:hover {
  color: #ff6b6b;
}

.social-icons {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: white;
  transition: all 0.3s ease;
}

.social-icon:hover {
  background-color: #ff6b6b;
  transform: translateY(-3px);
}

.copyright {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
  color: #ccc;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  
  .hero-content h2 {
    font-size: 36px;
  }
  
  .hero-content p {
    font-size: 18px;
  }
  
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
  
  .outfit-grid {
    grid-template-columns: 1fr;
  }
}
</style>